<template>
    <div>
        <el-dialog :title="title" :visible.sync="isDialog" width="40%">
            <el-form
                    :label-position="labelPosition"
                    :model="resModelForm"
                    :rules="resRules"
                    label-width="80px"
                    ref="resModelForm"
            >
                <el-form-item label="上级菜单">
                    <el-select
                            :class="{ 'select-menu': isdisable }"
                            v-model="resModelForm.pid"
                    >
                        <el-option
                                :key="index"
                                :label="item.name"
                                :value="item.pid"
                                v-for="(item, index) of getallresource"
                        >
                            {{item.name}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源名称" prop="name">
                    <el-input v-model="resModelForm.name"/>
                </el-form-item>
                <el-form-item label="资源内容">
                    <el-input v-model="resModelForm.resource"/>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-input v-model="resModelForm.remark"></el-input>
                </el-form-item>
                <el-form-item align="center" class="res-btn">
                    <el-button @click="handleSave('resModelForm')" type="primary">保存信息</el-button>
                    <el-button @click="handleClear('resModelForm')">清空数据</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop, Emit } from "vue-property-decorator";
  import { resInfo, resSave } from "@/api/api";

  @Component({})
  export default class resModel extends Vue {
    private isdisable: boolean = true;
    private labelPosition: string = "right";
    @Prop(Object)
    protected disDilog!: any | undefined;
    @Prop(Object)
    protected resModelForm!: any | undefined;

    @Emit("update")
    protected handleUpdate(page: number) {
      return page;
    }

    protected name!: "resModel";

    get isDialog() {
      return this.disDilog.isDialog;
    }

    set isDialog(val) {
      this.disDilog.isDialog = val.isDialog;
    }

    get title() {
      return this.disDilog.title;
    }

    protected getallresource = [];
    protected resRules = {
      name: [
        {
          required: true, message: "资源名称不能为空", trigger: "blur"
        }
      ]
    };

    protected created() {
      this.handleGetallresource();
    }

    /*
    * 保存
    * */
    protected handleSave(name: any) {
      (this.$refs[name] as any).validate(async (volid: any) => {
        if (volid) {
          const { pid, name, resource, remark } = this.resModelForm as any;
          const res = await resSave({ pid, name, resource, remark });
          if (res) {
            this.$message({
              type: "success",
              message: "保存成功"
            });
            this.handleUpdate(1);
          } else {
            this.$message({
              type: "error",
              message: "保存失败"
            });
          }
        }
      });
    }

    /*
    * 获取资源信息
    * */
    protected async handleGetallresource() {
      const res = await resInfo();
      if (res) {
        const { success, object, message } = res;
        if (success) {
          this.getallresource = object.filter((val: { ordernum: any; }) => {
            return val.ordernum === 1;
          });
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
    .select-menu {
        width: 456px;
    }

    .res-btn {
        /deep/ .el-form-item__content {
            margin-left: 0 !important;
        }
    }
</style>
